<template>
    <el-container>
        <el-container style="min-height: 520px">
            <el-header style="padding: 0;">
                <el-form
                    inline
                    label-width="49px"
                    :model="materialQueryList"
                    style="width: 100%;display: flex;justify-content: space-between;"
                >
                    <el-input
                        placeholder="---请输入物料编号---"
                        v-model="materialQueryList.materialCode"
                        style="width: 176px"
                        @keyup.enter="$refs.mytable.getData()"
                    />&nbsp;
                    <el-input
                        placeholder="---请输入物料名称---"
                        v-model="materialQueryList.materialName"
                        style="width: 176px"
                        @keyup.enter="$refs.mytable.getData()"
                    />&nbsp;
                    <el-input
                        placeholder="---请输入物料规格---"
                        v-model="materialQueryList.materialSpecs"
                        style="width: 176px"
                        @keyup.enter="$refs.mytable.getData()"
                    />&nbsp;
                    <el-tree-select
                        placeholder="---请选择物料分类---"
                        v-model="materialQueryList.materialTypeIds"
                        :props="{ label: 'label', value:'value',children: 'children' }"
                        :data="materialTypeTree"
                        multiple
                        :render-after-expand="false"
                        show-checkbox
                        style="width: 176px"
                    />&nbsp;
                    <el-select
                        placeholder="---请选择状态---"
                        v-model="materialQueryList.status"
                        style="width: 176px"
                    >
                        <el-option label="---请选择---" value />
                        <el-option v-for="item in optionsState" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>&nbsp;
                    <el-button type="primary"  @click="opBindData">查询</el-button>
                </el-form>
            </el-header>
            <el-foot>
                <scTable ref="mytable" :queryType="queryType" :data="listData" :queryList="materialQueryList"
                    :column="columnList" :orderList="OrderList"  @row-click="clickRow" :sort-orders="['ascending', 'descending']"
                    @selection-change="selectionChange"
                    row-key="'materialItemId'"
                    key="'materialItemId'" stripe show-summary remoteSummary
                    style="height: 450px; min-width: 420">
                    <el-table-column type="selection" min-width="50"></el-table-column>
                    <el-table-column label="物料编码" prop="materialCode" min-width="110" sortable></el-table-column>
                    <el-table-column label="物料名称" prop="materialName" min-width="180" sortable></el-table-column>
                    <el-table-column label="单位" prop="unitName" min-width="120" sortable></el-table-column>
                    <el-table-column label="物料规格" prop="materialSpecs" min-width="180" sortable></el-table-column>
                    <el-table-column label="物料分类" prop="materialTypeName" min-width="180" sortable></el-table-column>
                    <el-table-column label="状态" prop="statusDesc" sortable min-width="120"></el-table-column>
                </scTable>
            </el-foot>
        </el-container>
    </el-container>
</template>

<script>
import publicjs from "@/api/model/publicjs";
export default {
    name: "typelist",
    components: {
        publicjs,
    },
    props: {
        queryType: { type: String, default: "" },
        queryList: { type: Object, default: {} }
    },
    data() {
        return {
            materialTypeFlag:true,
            selectionRows: [],
            selection: [],
            pkList: [
                this.queryType == "material/pages"
                    ? "materialId"
                    : "materialItemId",
            ],
            attrList: {},
            valueList: {},
            materialQueryList: {},
            result: "", // 运行结果
            props1: {
                checkStrictly: true,
                emitPath: false,
            },
            group: [],
            optionsUomCode: [],
            materialTypeTree: [],
            lastClickTime: 0,
            doubleClickTimeout: null,
        };
    },
    computed: {

    },
    methods: {
        searchChange(){
            this.materialQueryList = {...this.materialQueryList, ...this.queryList };
            this.$nextTick(() => {
                this.$refs.mytable.getData();
          });
        },
        //表格选择后回调事件
        selectionChange(selection) {
            // this.$nextTick(() => {
            //     const newSelection = new Set([...this.selectionRows, ...selection]);
            //     this.selectionRows = Array.from(newSelection); // 转换回数组形式
            // });
            this.selectionRows = selection
            console.log(selection,'selection')
        },
        clickRow(row){

                clearTimeout(this.doubleClickTimeout);
                // 记录当前点击时间
                const currentTime = new Date().getTime();

                // 判断是否为双击
                if (currentTime - this.lastClickTime < 250) {
                // 双击
                // this.toggleSelection(row);
                this.$refs.mytable.toggleRowSelection(row, true);
                   // 触发事件，传递选中的行
                this.$emit('selection-changed', this.selectionRows);
                } else {
                // 单击
                this.lastClickTime = currentTime;
                }

                // 设置超时，以便下次点击被认为是单击
                this.doubleClickTimeout = setTimeout(() => {
                this.lastClickTime = 0;
                }, 500);

        },
        initMaterialType(ids,showFlag){
            this.materialQueryList.materialTypeIds = [ids]
            this.materialTypeFlag = showFlag
        },
        async opBindData() {
            this.materialQueryList = {...this.materialQueryList, ...this.queryList };
            this.$nextTick(() => {
                this.$refs.mytable.getData();
            });
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    { Codes: ["Status"] }
                );
                if (returnValue.status == 200) {
                    this.optionsState = returnValue.response.find(
                        (p) => p.code == "Status"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }

            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "material-type/tree",
                    { status: 1 }
                );
                if (returnValue.status == 200) {
                    this.materialTypeTree = returnValue.response;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
    },
    async mounted() {
        await this.initOptions();
        await this.opBindData();
    },
};
</script>
